<template>
  <div class="line">
    <div class="main" ref="main">

    </div>
  </div>
</template>
<script>
const echarts = require('echarts/lib/echarts') // 引入echarts
require('echarts/lib/chart/bar') // 引入柱状图
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
  data () {
    return {
      data: {
        indicator: [],
        value: []
      },
      title: {
        text1: '图表名称',
        x: 'left',
        y: 'top',
        fontFamily: 'Courier New',
        fontSize: 20,
        color: '#000'
      },
      legend: {
        backgroundColor: '#EFEBE3', // 背景颜色
        shape: 'polygon', // 雷达图形状 'polygon' 和 'circle'
        color: '#000', // 标签颜色
        fontSize: 8, // 标签大小
        splitLineColor: '#3f3ce6', // 分割线颜色
        dataLineColor: '#000', // 数据线颜色
        lineType: 'solid' // 数据线虚实 'dashed',  'solid'
      }
    }
  },
  methods: {
    initEcharts () {
      // const THIS = this
      this.getData()
      const mainDiv = this.$refs.main // 找到绘制的区域,强烈推荐使用refs
      const myChart = echarts.init(mainDiv) // 初始化
      myChart.setOption({ // 官网例子
        backgroundColor: this.legend.backgroundColor,
        title: {
          text: this.title.text1,
          x: this.title.x, // 标题横向位置//////////////////////////////////// 增
          y: this.title.y, // 标题纵向位置//////////////////////////////////// 增
          textStyle: {
            fontFamily: this.title.fontFamily,
            fontSize: this.title.fontSize,
            color: this.title.color
          }
        },
        // 右上角工具条
        toolbox: {
          show: true,
          feature: {
            mark: {
              show: true
            },
            /* dataView: {
              show: true,
              readOnly: false
            }, */
            saveAsImage: {
              show: true
            }
          }
        },
        tooltip: {},
        radar: {
          shape: this.legend.shape,
          name: {
            textStyle: {
              color: this.legend.color, // 标签颜色
              backgroundColor: '#fff', // 标签框颜色
              borderRadius: 5, // 标签圆角
              fontSize: this.legend.fontSize, // 标签大小
              padding: [3, 5]
            }
          },
          indicator: this.data.indicator,
          axisLine: {
            lineStyle: {
              color: this.legend.splitLineColor // 直线的颜色
            }
          },
          splitLine: {
            lineStyle: {
              color: this.legend.splitLineColor // 圆线的颜色
            }
          }
        },
        series: [{
          /* name: '预算 vs 开销（Budget vs spending）', */
          type: 'radar',
          // areaStyle: {normal: {}},
          data: [
            {
              value: this.data.value,
              /* name: '预算分配（Allocated Budget）' */
              lineStyle: {
                type: this.legend.lineType, // 'dashed',  'solid'  //数据线实线还是虚线
                color: this.legend.dataLineColor // 数据线颜色
              }
            }
          ]
        }]

      })
    },
    getData () {
      this.data.indicator = []
      this.data.value = []
      for (let j = 0; j < this.$store.state.singleFile.info.inden.length; j++) {
        const obj = { name: '', max: 100 }
        obj.name = this.$store.state.singleFile.info.inden[j]
        this.data.indicator[j] = obj
        this.data.value[j] = this.$store.state.singleFile.info.value[j]
      }
    }
  },

  watch: {
    '$store.state.singleFile.date': function (val) {
      this.initEcharts()
    },
    '$store.state.chartTitle.text': function (val) {
      this.title.text1 = val
      console.log('histogram接收到的title' + this.title.text)
      this.initEcharts()
    },
    '$store.state.chartTitle.titleAcross': function (val) {
      this.title.x = val
      this.initEcharts()
    },
    '$store.state.chartTitle.titleVertical': function (val) {
      this.title.y = val
      this.initEcharts()
    },
    '$store.state.chartTitle.wordFamily': function (val) {
      this.title.fontFamily = val
      this.initEcharts()
    },
    '$store.state.chartTitle.wordSize': function (val) {
      this.title.fontSize = val
      this.initEcharts()
    },
    '$store.state.chartTitle.titleColor': function (val) {
      this.title.color = val
      this.initEcharts()
    },
    '$store.state.radarLegend.backgroundColor': function (val) {
      this.legend.backgroundColor = val
      this.initEcharts()
    },
    '$store.state.radarLegend.shape': function (val) {
      this.legend.shape = val
      this.initEcharts()
    },
    '$store.state.radarLegend.color': function (val) {
      this.legend.color = val
      this.initEcharts()
    },
    '$store.state.radarLegend.fontSize': function (val) {
      this.legend.fontSize = val
      this.initEcharts()
    },
    '$store.state.radarLegend.splitLineColor': function (val) {
      this.legend.splitLineColor = val
      this.initEcharts()
    },
    '$store.state.radarLegend.dataLineColor': function (val) {
      console.log('雷达图接收到的数据线颜色' + val)
      this.legend.dataLineColor = val
      this.initEcharts()
    },
    '$store.state.radarLegend.lineType': function (val) {
      this.legend.lineType = val
      this.initEcharts()
    }
  },
  destroyed () {
    this.$store.state.singleFile.info = null
    this.$store.state.chartTitle.id = ''
    this.$store.state.chartTitle.text = ''
    this.$store.state.chartTitle.titleAcross = ''
    this.$store.state.chartTitle.titleVertical = ''
    this.$store.state.chartTitle.wordFamily = ''
    this.$store.state.chartTitle.wordSize = ''
    this.$store.state.chartTitle.titleColor = ''
  },
  mounted () {
    this.initEcharts()
  }

}
</script>
<style lang="scss" scoped>
  .line{
    .main {
      width: 735px;
      height:500px;
    }
  }
</style>
